import React from 'react';
import style from './style.styl';
import {Button, Input, Select, error, MulSelect} from '../../../../ui-components';
import util from '../../../../util';
import cx from 'classnames';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 
import { clearAtList, fetchAtList } from '../../../../actions/home.action'

import InvitedItem from './InvitedItem';

@connect(({ app }) => ({ app }), dispatch => ({actions: bindActionCreators({fetchAtList, clearAtList, ...reviewAction}, dispatch)}))
class SelfInvited extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'SelfInvited';
    this.state = {
      reviewerSelect: [],
    };
  }
  handleSelect = (obj) => {
    const item = obj.pop();
   
    this.selectActived([item]);
  }
  selectActived = (reviewerSelect) => {
    if(!reviewerSelect.length) return;
    const {
      invitedUsers,
    } = this.props;
    this.props.actions.updateReviewItemInvitations(this.props.itemId, {
      invitedUserIds: [
        ...invitedUsers.invitedUsers.map(v => {return {idValue: v.invitedUserProfile.userId}}),
        ...reviewerSelect.map(v => {return {idValue: v.userId}}),
      ]
    }, ()=>{
      this.props.actions.fetchReviewItemInvitations(this.props.itemId, 'activities');
      this.setState({
        reviewerSelect: [],
      });
    })
  }
  onRemove = (item) => {
    const {
      invitedUsers,
    } = this.props;
    this.props.actions.updateReviewItemInvitations(this.props.itemId, {
      invitedUserIds: [
        ...invitedUsers.invitedUsers.filter(v => v.invitedUserProfile.userId !== item.invitedUserProfile.userId).map(v => {return {idValue: v.invitedUserProfile.userId}}),
      ]
    }, ()=>{
      this.props.actions.fetchReviewItemInvitations(this.props.itemId, 'activities');
      this.setState({
        reviewerSelect: [],
      });
    })
  }
  goPrevious = () => {
    this.props.tabRouter && this.props.tabRouter(2);
  }
  goNext = () => {
    this.props.tabRouter && this.props.tabRouter(4);
  }
  render() {
    const {
      invitedUsers,
    } = this.props;
    const { atList } = this.props.app;
    const managerUser = invitedUsers.managerUser ? invitedUsers.managerUser.invitedUserProfile : {};
    const invitedUserslist = invitedUsers.invitedUsers ? invitedUsers.invitedUsers.map(v => v.invitedUserProfile) : [];

    return (
      <div>
        <div style={{height: '40px'}}>
          <div className={style['invited-search']}>
            <MulSelect 
              placeholder="搜索同事并添加"
              width={'430px'}
              value={[...this.state.reviewerSelect]}
              fetch={value => {
                if (value)
                  this.props.actions.fetchAtList({
                    keyword: value,
                    type: 2
                  });
                else
                  this.props.actions.clearAtList();
              }}
              getItemAttrs={(item) => {
                return {
                  label: item.fullName,
                  img: item.avatarUrl,
                }
              }}
              onSelect={this.handleSelect}
              options={atList}
              excludeList={[this.props.app.profile, ...invitedUserslist, managerUser ]}
            />  
          </div>
        </div>
        <div className={style['invited-list']}>
          <InvitedItem item={invitedUsers.managerUser} isManager />
          {
            invitedUsers.invitedUsers.map((v, i) => {
              return <InvitedItem item={v} key={i} onRemove={this.onRemove}/>
            })
          }
        </div>
        <div className={style['btn-bar']}>
          <Button label={'上一步'} className={style['l-btn']} onClick={this.goPrevious} />
          <Button label={'保存,继续下一步'} className={style['r-btn']} onClick={this.goNext} />
        </div>
      </div>
    );
  }
}

export default SelfInvited;
